<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>chat</title>
    <script src="js/lib/vue.js"></script>
    <script src="js/utils/dateUtils.js"></script>
    <script src="js/chat/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        html, body {
            padding: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            /*超出隐藏，不滑动，固定整个页面*/
            overflow: hidden;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: 微软雅黑;
            letter-spacing: 0.03em;
            padding: 0;
        }

        .menuActive {
            background-color: #363e47;
            border-left: 5px solid #5cadff;
            color: #0000ff;
            padding: 5px 0 5px 0;
        }

        .userListActive {
            background-color: #404953;
            /*做边框颜色和背景一样，这样在点击时会加边框，就会导致内容右移，有个动画效果*/
            border-left: #404953 5px solid;
            color: #ff0000;
            padding: 5px 0 5px 0;
        }

        /*向右箭头*/
        .userListActive::after {
            content: "";
            width: 10px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -50%) rotate(-45deg);
            position: absolute;
            right: 5px;
            top: 50%;
        }

        /*新消息闪动红点，主要是它的after微元素*/
        .newMsg {

        }
        .newMsg::before{
            content:"";
            width:10px;
            height:10px;
            background:red;
            position:absolute;
            left: 2px;
            top: calc(50% - 5px);
            border-radius: 10px;
            animation-name:myfirst;
            animation-duration:1.5s;
            animation-timing-function:linear;
            animation-delay:0s;
            animation-iteration-count:infinite;
            animation-direction:alternate;
            animation-play-state:running;
            /* Safari and Chrome: */
            -webkit-animation-name:myfirst;
            -webkit-animation-duration:1.5s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-delay:0s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-direction:alternate;
            -webkit-animation-play-state:running;
        }

        @keyframes myfirst {
            0%   {background:#363e47;}
            100% {background:red;}
        }

        @-webkit-keyframes myfirst {
            0%   {background:#363e47;}
            100% {background:red;}
        }

        .dialogList .item {
            height: 50px;
            min-width: 200px;
            width: calc(100% - 25px);
            cursor: pointer;
            position: relative;
            padding: 10px;
            text-align: left;
        }

        .dialogList .item:hover{
            background-color: #404953;
        }

        .panel {
            background-color: rgba(0, 0, 0, 0.2);
            width: 80%;
            height: 80%;
            /*百度vh单位有介绍,vh是可视窗口宽度(比方说F12时这个窗口也会跟着缩小，但是px的话不会)，其余个方向必须auto才会水平居中，否则body的center无效*/
            margin: 8vh auto auto auto;
            display: -webkit-flex;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: center;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .menu {
            background-color: #303841;
            box-sizing: border-box;
            width: 8%;
            min-width: 50px;
            height: 100%;
            position: relative;
        }

        .dialogList {
            background-color: #363e47;
            width: 20%;
            height: 100%;
            min-width: 150px;
        }

        .chatTab {
            width: 100%;
            background-color: #F5F5F5;
            display: -webkit-flex;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            justify-content: space-between;
        }

        .chatTab .messageTabTitle {
            height: 50px;
            border-bottom: 1px solid #e7e7e7;
        }

        .chatTab .userMessageTabs {
            height: calc(100% - 225px);
            padding: 10px;
        }

        .chatTab .userMessageTabs .messageTab {
            height: 100%;
            width: 100%;
            overflow-y: auto;
        }

        .chatTab .inputBox {
            height: 150px;
            border-top: 1px solid #e7e7e7;
        }

        ::-webkit-scrollbar {
            /*隐藏滚动条，ie无效*/
            display: none;
        }

        .msgClass {
            padding: 10px 20px 10px 20px;
            border-radius: 5px;
            max-width: 500px;
            word-wrap: break-word;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
        }

        .msgLeft {
            float: left;
            background-color: #FFFFFF;
        }

        .msgRight {
            float: right;
            background-color: #5cadff;
        }

        .inputBtnBar {
            padding-top: 5px;
            height: 30px;
        }

        .inputBtnBar li {
            width: 30px;
            height: 30px;
            display: inline-block;
            float: left;
            padding-left: 10px;
            cursor: pointer;
        }

        .sendBtn {
            width: 50px;
            height: 35px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-size: 100% 100%;
            background-image: url("img/send.png");
            cursor: pointer;
        }

        .msgImgClass {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #FFFFFF;
            max-width: 500px;
            max-height: 500px
        }

        .wordLoopClass{
            float: left;
            overflow: hidden;
            display: inline-block;
            white-space: nowrap;
            animation: 10s wordsLoop linear infinite normal;
            -webkit-animation: 10s wordsLoop linear infinite normal;
        }

        @keyframes wordsLoop {
            0% {
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(100%);
                -webkit-transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }

    </style>
</head>
<body style="text-align: center;background: url('img/bg.jpg');background-position:100% 100%; background-repeat:no-repeat;">
<div class="panel" id="app">
    <div class="menu">
        <div>
            <img :src="mineInfo.headImg" style="width: 50px;height:50px;border-radius: 50px;margin: 10px 0 20px 0">
        </div>
        <div style="max-height: calc(100% - 100px);overflow-y: auto;">
            <ul style="list-style: none">
                <li style="cursor: pointer" :class="{menuActive: menuActiveTab==0}" @click="initDialogList(0)">
                    <img src="img/message.png" style="padding: 5px"></li>
                <li style="cursor: pointer" :class="{menuActive: menuActiveTab==1}" @click="initDialogList(1)">
                    <img src="img/history.png" style="padding: 5px"></li>
            </ul>
        </div>
        <div style="position: absolute;bottom: 0;width:100%;text-align: center">
            <img src="img/out_normal.png" @click="closeActiveDialog()" title="关闭当前会话" style="cursor: pointer;width: 40px;height:40px;padding: 5px">
        </div>
    </div>
    <div class="dialogList" id="dialogList">
        <!-- 这个100%必须要，否则会超出外层div的大小 -->
        <div style="width:100%;height: 100%;overflow-y: auto;">
            <ul style="list-style: none">
                <li class="item" v-for="(dialog,index) of dialogList"
                    :class="{userListActive: userListActiveTab==index,newMsg: userListActiveTab!=index && dialog.readFlag==0}" @click="changeDialogListTab(index,dialog)">
                    <div style="display: inline-block">
                        <img :src="dialog.headImg"
                             style="float: left;margin-right: 10px ;padding:5px; width: 40px;height: 40px;border-radius: 50px">
                        <div style="float: left;max-width:100px">
                            <div style="white-space: nowrap;overflow: hidden;height: 20px; padding-top: 5px;color: #f7f7f8">{{dialog.realname}} ({{dialog.nickname}})</div>
                            <div style="white-space: nowrap;overflow: hidden;font-size: 12px;color: #a5b5c1">{{dialog.groupName}}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="chatTab">
        <div class="messageTabTitle" id="messageTabTitle">
            <div style="padding: 5px;float: left">
                <img style="height: 40px;width: 40px;border-radius: 40px" :src="messageReceiver.headImg"/>
                <div style="display: inline-block; color: #1c2438; font-size: 18px; text-shadow: #76828c 0 0 0.1em; font-weight: 700; max-width: 200px;overflow: hidden; height: 50px;vertical-align: middle">
                    <div class="wordLoopClass">{{activeUserName}} -- {{activeDialogGroupName}}</div>
                </div>
            </div>

        </div>
        <div class="userMessageTabs" id="userMessageTabs">
            <div class="messageTab" :id="'dialog_'+dialog.id" v-for="(dialog,index) of dialogList"
                 v-if="activeDialogId==dialog.id">
                <div style="width: 100%;padding: 10px 0 10px 0;display: inline-block"
                     v-for="(msg,index) of activeMessages">
                    <div class="msgClass" :class="[msg.sender==1 ? 'msgRight' : 'msgLeft']">
                        <div style="font-size: 14px;text-align: left" v-if="msg.type==0">{{msg.content}}</div>
                        <div style="font-size: 14px;text-align: left" v-if="msg.type==1"><img class="msgImgClass" :src="msg.content"></div>
                        <div style="color: #a5b5c1;font-size: 12px">{{msg.createTime}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inputBox" id="inputBox">
            <div class="inputBtnBar">
                <li><img style="width: 100%;height: 100%" title="表情" src="img/emoji.png"></li>
                <li><img style="width: 100%;height: 100%" @click="triggerUpload()" title="发送图片" src="img/file.png">
                    <input ref="fileUploadInput" style="display: none" @change="fileUpload()" type="file"/>
                </li>
            </div>
            <div style="position:relative;padding: 10px">
                <textarea v-model="typingMessage" @keydown.ctrl.enter="sendMessage()" rows="5"
                          style="resize: none;width: 100%;border: none;outline: none;background-color: transparent"></textarea>
                <div class="sendBtn" @click="sendMessage()">
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>